<!--
 * @Author: wangze@linkstec.com
 * @Date: 2022-02-10 16:10:46
 * @Function: Please Input Function
-->
<template>
  <div class="input-item">
    <div class="stop-item" @click="stopNum('minus')" v-if="isShowStop">
      <i class="el-icon-minus"></i>
      <span>{{ step }}</span>
    </div>
    <el-input
      v-model="value"
      type="number"
      v-bind="InputProps"
      v-on="$listeners"
      @input.native="input"
      @blur="blur"
      @keydown.native="channelInputLimit"
      style="width: 100%"></el-input>
    <div class="stop-item" @click="stopNum('plus')" v-if="isShowStop">
      <i class="el-icon-plus"></i>
      <span>{{ step }}</span>
    </div>
  </div>
</template>

<script>
import { Input } from 'element-ui';
import math from '@/utils/math';

export default {
  name: 'LkInputNumber',
  props: Object.assign({}, Input.props, {
    value: {
      type: String,
      default: ''
    },
    step: {
      type: Number,
      default: 1
    },
    precision: {
        type: Number | String,
        default: ''
    },
    isShowStop: {
        type: Boolean,
        default: false
    }
  }),
  components: {
  },
  // 定义属性
  data () {
    return {
    };
  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {
     InputProps () {
      const props = {};
      Object.keys(Input.props).forEach(k => {
        typeof this[k] !== 'undefined' && (props[k] = this[k]);

        return props[k];
      });
      return props;
    }
  },
  // 监控data中的数据变化
  watch: {

  },
  // 方法集合
  methods: {
    stopNum (type) {
        let value = Number(this.value);
        value = math[type](value, Number(this.step));
        this.$emit('input', this.precision ? value.toFixed(this.precision) : value);
        this.$emit('change', this.precision ? value.toFixed(this.precision) : value);
    },
     channelInputLimit (e) {
        const key = e.key;
        // 不允许输入'e'
        if (key === 'e') {
            e.returnValue = false;
            return false;
        }
        // 不允许输入'.'
        if (this.precision === 0 && key === '.') {
            e.returnValue = false;
            return false;
        }
        // 长度限制
        if (this.precision == 0 && String(Math.floor(e.target.value)).length > 10 && key != 'Backspace' && key != '.') {
            e.returnValue = false;
            return false;
        }
        return true;
    },
    input (e) {
        if (e.target.value.includes('.')) {
            const [, decimals] = e.target.value.split('.');
            if (this.precision && String(decimals).length > this.precision) {
                e.target.value = e.target.value.slice(0, e.target.value.indexOf('.') + this.precision + 1);
            }
        }
        this.$emit('input', e.target.value);
        this.$emit('change', e.target.value);
    },
    blur (e) {
        e.target.value = Number(e.target.value);
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {

  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {

  }
};
</script>

<style lang='scss' scoped>
$-input-number-size: 50px;
.input-item{
  display: flex;
  border: 1px solid #DCDFE6;
  border-radius: 6px;
  .stop-item{
    width: 80px;
    height: $-input-number-size;
    background: #F5F7FA;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    i{
      margin-bottom: 4px;
    }
    span{
      font-size: 14px;
      line-height: 14px;
    }
  }
  ::v-deep .el-input__inner {
    height: $-input-number-size;
    line-height: $-input-number-size;
    text-align: center;
    border-top: none;
    border-bottom: none;
  }
  // 取消input的上下箭头
  ::v-deep .el-input__inner::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
  }
  ::v-deep .el-input__inner::-webkit-outer-spin-button{
    -webkit-appearance: none !important;
  }
}
</style>
